@import "modules/_all";

.heng-zuopin {
  @extend %h-title;
}

.container {
  padding: 20px 0;
  .zuopin-thumb {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 0;
    li {
      display: inline-block;
      width: 248px;
      overflow: hidden;
      margin: 0 1px;
      position:relative;
      img {
        width: 100%;
      }
      .mask{
        position: absolute;
        transition:all .3s;
        opacity: 0;
        top:0;
        left: 0;
        bottom:0;
        right:0;
        background:rgba(0,0,0,0.6);
        .txt{
          position: absolute;
          top:50%;
          left:50%;
          margin-left:-42px;
          color:#fff;
        }
      }
      &:hover {
        cursor: pointer;
        .mask{
          opacity: 0.99;
        }
      }
    }
    @include mobile {
      width: 98%;
      overflow: auto;
      li {
        width: 49%;
        margin-top: 1px;
        &:nth-child(even) {
          float: left;
        }
        &:nth-child(odd) {
          float: right;
        }
      }
    }

    @include tablet {
      width: 98%;
      overflow: auto;
      li {
        width: 49.5%;
        margin-top: 1px;
        &:nth-child(even) {
          float: left;
        }
        &:nth-child(odd) {
          float: right;
        }
      }
    }
  }
  // thumb
}

#xiju-desc {
  background:#e5e5e5;
  padding:24px 0;
  .cnt-1000 {
    img {
      width: 50%;
      float: left;

      @include mobile {
        width:100%;
      }
      @include tablet {
        width:100%;
      }
    }
    .desc-outer {
      width: 50%;
      float: left;
      padding-left:50px;
      padding-top:50px;
      padding-right:10px;

      @include mobile {
        width:100%;
        padding:50px 10px;
      }
      @include tablet {
        width:100%;
        padding:50px 10px;
      }

      .title {
        font-size:18px;
        font-weight: bold;
      }
      p{
        line-height: 1.8em;
        font-size:14px;
      }
      .more{
        color:red;
        text-decoration: underline;
      }
    }
  }
}

.zixun {
  font-size:16px;
  color:#bd4b3e;
  text-align: center;
  line-height: 38px;
  border-top:1px solid #000;
  border-bottom:1px solid #b2b2b2;
  margin:16px auto;
  width:1000px;

  @include mobile {
    width:98%;
  }
  @include tablet{
    width:100%;
  }
}

.zixun-thumb{
  width:1000px;
  font-size:0px;
  margin:0 auto;
  text-align: center;
  @include mobile {
    width:100%;
  }
  @include tablet {
    width: 100%;
  }
  li{
    display: inline-block;
    margin:1px;
    width:331px;
    cursor:pointer;
    position:relative;
    .mask{
      position: absolute;
      bottom:-80px;
      text-align: right;
      background:rgba(0,0,0,0.6);
      color:#fff;
      width:100%;
      padding:10px;
      transition:all 0.3s;

      .cn{
        font-size:24px;
      }
      .en{
        font-size:18px;
      }
    }
    &:hover{
      .mask{
        bottom:0px;
      }
    }
    @include mobile {
      width:98%;
    }
    @include tablet {
      width:33%;
    }
    img {
      width:100%;
    }
  }
}


// loading
.loading-bg{
  position:relative;
  .loading-txt{
    position:absolute;
    left: 50%;
    top:50%;
    margin-left:-75px;
    margin-top:30px;
  }
  .bg{
    position: absolute;
    left:50%;
    top:50%;
    margin-top:-226px;
    margin-left:-126px;
  }
  .img-fg{
    @extend .bg;
    overflow: hidden;
  }
  .fg{
    height:255px;
    width:100%;
  }

  .txt{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -112px;
    margin-left: 4px;
    .per{
      color:#{$active-color};
      font-size:52px;
    }
    .symbl{
      color:#7d7d7d;
      font-size:16px;
    }
  }
}

